<template>
  <div
    class="container"
    style="max-height: 380px; max-width: 850px"
    v-loading="loading"
    element-loading-text="拼命渲染中"
  >
    <div style="margin-bottom:15px">
      <el-tooltip
        class="item"
        effect="light"
        content="导出为pdf(导出时请将pdf布局调成横向)"
        placement="top"
      >
        <el-button round size="medium" @click="initPdfData">
          <svg
            t="1621213199750"
            class="icon"
            viewBox="0 0 1024 1024"
            version="1.1"
            xmlns="http://www.w3.org/2000/svg"
            p-id="4393"
            width="18"
            height="18"
          >
            <path
              d="M535.198324 0h69.53853v95.276816c124.175945 0.677323 248.351891-1.354647 373.205159 0.677324a40.6394 40.6394 0 0 1 45.154889 45.154889c1.919083 234.579649 0 469.272186 1.128872 703.851835-1.128872 24.044979 2.257744 50.686363-11.288722 72.022049-17.045971 12.417595-38.946092 11.288722-58.814243 11.288722H604.962628v95.276816h-72.925146C354.917429 990.924044 177.458715 960.557381 0 928.723184V95.502591C178.361812 63.555507 356.836512 32.51152 535.198324 0z"
              fill="#A33639"
              p-id="4394"
            ></path>
            <path
              d="M604.736854 130.949179h383.816558v762.101642h-383.816558v-95.276816h302.42487v-47.638408H604.736854v-59.491567h302.42487V643.457171H604.736854v-60.056002h302.42487v-47.638409H604.736854v-59.491566h302.42487V428.971447H604.736854v-59.830228h302.42487v-47.638408H604.736854V261.898357h302.42487v597.17341H604.736854z"
              fill="#FFFFFF"
              p-id="4395"
            ></path>
            <path
              d="M645.489141 529.66685h302.424871v47.638409H645.489141zM645.489141 611.510087h302.424871v47.638408H645.489141zM645.489141 693.353324h302.424871v47.638408H645.489141zM596.383199 775.19656h351.530813v47.638409H596.383199z"
              fill="#A33639"
              p-id="4396"
            ></path>
            <path
              d="M180.619557 317.325984c59.265792 2.822181 130.949179-24.044979 180.619557 21.335685 46.961085 58.475582 34.54349 165.831331-35.107927 200.713483-24.722302 12.982031-53.169882 11.288722-80.037041 10.272737v130.949179L180.619557 675.065594c-0.903098-119.208908-1.128872-238.530702 0-357.73961z"
              fill="#FFFFFF"
              p-id="4397"
            ></path>
            <path
              d="M245.642597 377.720648c21.448572-1.015985 48.089957-5.079925 62.539522 15.578437a82.407673 82.407673 0 0 1 1.467534 73.263808c-12.417595 22.577445-40.526513 20.771249-62.313747 23.367655-2.257744-37.365671-2.03197-74.731342-1.693309-112.2099zM885.713152 379.865505a83.988094 83.988094 0 0 1-48.315732-19.642376 460.57987 460.57987 0 0 0-77.666409 24.835189c-20.3197 36.011024-39.171866 54.411641-55.540514 54.411641a17.384632 17.384632 0 0 1-9.821188-2.596406 19.416602 19.416602 0 0 1-11.288723-17.723294c0-5.870136 1.354647-22.577445 63.329733-49.105942a467.917539 467.917539 0 0 0 34.656377-81.278801c-7.902106-15.691324-24.835189-54.298754-13.094918-73.941131a20.658362 20.658362 0 0 1 20.206813-10.498511 21.900121 21.900121 0 0 1 17.045971 8.466541c8.466542 11.288722 7.789218 36.688347-3.27373 73.376695A196.988204 196.988204 0 0 0 842.70312 338.661669a221.14607 221.14607 0 0 1 41.090949-4.515489c30.705325 0.677323 35.333701 15.014001 34.656377 23.59343 0 22.577445-21.56146 22.577445-32.624407 22.577444z m-185.022159 42.106935l2.257745-0.564436a45.154889 45.154889 0 0 0 23.932091-16.820197 56.443612 56.443612 0 0 0-26.189836 17.384633z m93.357734-200.261934h-2.144858a4.402602 4.402602 0 0 0-2.82218 0.677323 52.492559 52.492559 0 0 0 4.176827 33.866167 53.282769 53.282769 0 0 0 0.790211-34.54349zM790.210561 317.551758v1.24176l-0.677323-0.677324c-5.418587 14.336677-11.288722 28.44758-18.061956 42.332709l1.128872-0.677323V361.239114A346.338 346.338 0 0 1 812.788006 348.595745l-0.677324-0.564436h1.806196a196.310881 196.310881 0 0 1-23.706317-30.479551z m94.599493 34.769265a66.151913 66.151913 0 0 0-18.174843 1.693308 50.686363 50.686363 0 0 0 20.997024 6.660347 26.076949 26.076949 0 0 0 13.885128-1.580422c-0.451549-2.596406-3.273729-6.773233-17.158858-6.773233z"
              fill="#A33639"
              p-id="4398"
            ></path>
          </svg>
        </el-button>
      </el-tooltip>
    </div>
    <div style="margin-bottom:30px">
      <span style="font-weight: 600">{{ propIP }}负载使用情况</span>
      <span style="display: block"
        >类型:{{ postData.type == "cpu" ? "CPU" : "内存" }}</span
      >
      <span style="display: block"
        >时间:{{ postData.time }}至{{ postData.time2 }}</span
      >
    </div>
    <div id="ScatterBOX" class="ScaleCSSViewport_unzoom"></div>
  </div>
</template>
<script>
import { Line } from "@antv/g2plot";
import { getHisoryDataForMemory, selectServerCpu } from "@/api/index.js";

export default {
  props: ["propData", "propIP"],
  data() {
    return {
      loading: false,
      Scatter: "",
      postData: this.propData,
      lineData: [],
      line: "",
    };
  },
  created() {
    // this.postData = this.$store.getters["historyDataServerUsage/getItem"]
  },
  mounted() {
    this.getInfo();
  },
  methods: {
    async getInfo() {
      this.loading = true;
      switch (this.postData.type) {
        case "cpu":
          selectServerCpu({
            time: this.postData.time,
            time2: this.postData.time2,
            ip: this.propIP,
          })
            .then((res) => {
              if (res) {
                this.lineData = Object.values(res)[0].map((item) => {
                  return {
                    USED: item.avgCpuUsed,
                    Time: item.recordTime,
                  };
                });
                this.initLine();
              }
              this.loading = false;
            })
            .catch((err) => {
              console.log(err);
            });

          break;
        default:
          getHisoryDataForMemory({
            time: this.postData.time,
            time2: this.postData.time2,
            ip: this.propIP,
          }).then((res) => {
              if (res) {
                this.lineData = Object.values(res)[0].map((item) => {
                  return {
                    USED: item.avgMemoryUsed,
                    Time: item.recordTime,
                  };
                });
                this.initLine();
              }
              this.loading = false;
            }).catch((err) => {
              console.log(err);
            });

          break;
      }
    },
    initLine() {
      this.line = new Line("ScatterBOX", {
        data: this.lineData,
        padding: "auto",
        xField: "Time",
        yField: "USED",
        height: 250,
        meta: {
          USED: {
            min: 0,
            max: 100,
          },
        },
        xAxis: {
          tickCount: 5,
        },
        smooth: true,
      });

      this.line.render();
      this.loading = false;
    },
    initPdfData() {
      window.print();
    },
  },

  beforeDestroy() {
    if (this.Scatter) {
      this.Scatter.destroy();
    }
  },
};
</script>

<style></style>
